<template>
  <div id="home_page">
  <!-- 上半部分 -->
    <div class="above-content">
      <div class="content">
        <h2>产品设计，不止于快</h2>
        <p class="desc">
          远程办公好帮手  在线产品原型设计与协作平台
        </p>
        <a-button class="buttom-use">
          立即注册
        </a-button><br />
        <img src="../static/image/homePage/home1.jpg" alt="">
      </div>
    </div>
  <!-- 快速完成你的产品 -->
    <div class="middle">
      <h2>快速完成你的产品设计，把更多的时间留给思考</h2>
      <div class="mid-content">
        <a-row>
          <a-col :span="7" class="desgin img1">
            <h3 class="title">设计</h3>
            <p class="desc">轻松上手，创作自如</p>
          </a-col>
          <a-col :span="7" class="desgin img2">
            <h3 class="title">交互&amp;演示</h3>
            <p class="desc">逻辑可见，只需一步</p>
          </a-col>
          <a-col :span="7" class="desgin img3">
            <h3 class="title">标注&amp;讨论</h3>
            <p class="desc">对接开发，沟通顺畅</p>
          </a-col>
          <a-col :span="7" class="desgin img4">
            <h3 class="title">设计</h3>
            <p class="desc">轻松上手，创作自如</p>
          </a-col>
          <a-col :span="7" class="desgin img5">
            <h3 class="title">交互&amp;演示</h3>
            <p class="desc">逻辑可见，只需一步</p>
          </a-col>
          <a-col :span="7" class="desgin img6">
            <h3 class="title">标注&amp;讨论</h3>
            <p class="desc">对接开发，沟通顺畅</p>
          </a-col>
        </a-row>
      </div>
    </div>
  <!-- 详情 -->
    <div>
      <div class="detail">
        <div class="content">
          <span class="sec_tips">轻松上手，创作自如</span>
          <h3 class="sec_title">设计</h3>
          <p class="sec_desc">内置丰富的组件库和图标库，小白也能轻松掌握，简单拖拽、排列组合，顷刻间完成精美界面设计</p>
          <ul class="secquote_list">
            <li>
              <span>激活组件面板</span>
            </li>
            <li>
              <span>拖拽组件，快速构成界面</span>
            </li>
            <li>
              <span>完成的精美界面</span>
            </li>
          </ul>
        </div>
        <div class="img-right">
          <img src="../static/image/homePage/intro1.png" alt="">
        </div>
      </div>
      <div class="detail">
        <div class="img-left">
          <img src="../static/image/homePage/intro2.png" alt="">
        </div>
        <div class="content">
          <span class="sec_tips">逻辑可见，只需一步</span>
          <h3 class="sec_title">交互&amp;演示</h3>
          <p class="sec_desc">拖拽一下，就能实现页面跳转效果，动作+目标+动效，交互逻辑清晰可见</p>
          <ul class="secquote_list">
            <li>
              <span>自由拖拽</span>
            </li>
            <li>
              <span>更改链接效果</span>
            </li>
            <li>
              <span>一键预览页面和交互效果</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="detail">
        <div class="content">
          <span class="sec_tips">对接开发，沟通顺畅</span>
          <h3 class="sec_title">标注&amp;讨论</h3>
          <p class="sec_desc">开发者通过一条分享链接即可自动查看原型标注，准确便捷</p>
          <ul class="secquote_list">
            <li>
              <span>查看标注</span>
            </li>
            <li>
              <span>显示标注参数和代码</span>
            </li>
            <li>
              <span>协作成员对项目打点评论</span>
            </li>
          </ul>
        </div>
        <div class="img-right">
          <img src="../static/image/homePage/intro3.png" alt="">
        </div>
      </div>
      <div class="detail">
        <div class="img-left">
          <img src="../static/image/homePage/intro4.png" alt="">
        </div>
        <div class="content">
          <span class="sec_tips">随时复用，效率翻倍</span>
          <h3 class="sec_title">海量素材</h3>
          <p class="sec_desc">内置多行业模板和多平台素材，按需灵活取用，搭建你自己或团队的素材库，随时复用，把时间投入到更重要的业务梳理和创新中</p>
          <ul class="secquote_list">
            <li>
              <span>内置丰富的组件库、图标库和模板库</span>
            </li>
            <li>
              <span>双击置入画板</span>
            </li>
            <li>
              <span>支持添加标签，方便快速查找</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="detail">
        <div class="content">
          <span class="sec_tips">随时随地，开启创作</span>
          <h3 class="sec_title">云端编辑</h3>
          <p class="sec_desc">无论在公司还是远程，只需打开浏览器，随时可以让工作无缝衔接；无需反复下载和上传文件，即时同步项目信息，交接流程更加高效</p>
          <ul class="secquote_list">
            <li>
              <span>多设备协同工作</span>
            </li>
            <li>
              <span>支持多人同时编辑</span>
            </li>
            <li>
              <span>项目交接流畅</span>
            </li>
          </ul>
        </div>
        <div class="img-right">
          <img src="../static/image/homePage/intro5.png" alt="">
        </div>
      </div>
    </div>   
    <!-- 企业版 -->
    <div class="company">
      <div class="com-content">
        <span class="sec_tips">步调一致，井井有条</span>
        <h3 class="sec_title">企业版</h3>
        <p class="sec_desc">不止是产品经理，任何角色都可以在墨刀企业版找到一席之地</p>
        <p class="sec_desc">企业级项目上下游协作、交接及管理，让团队中每个人都如你一样高效</p>
        <img style="width: 100%;" src="../static/image/homePage/intro6.png" alt="">
      </div>
    </div>
    <!-- 底部 -->
    <div class="start-use">
      <div class="start-content">
        <h2>现在就使用紫枫，开始无忧创作</h2>
        <a-button class="submit">
          立即注册
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  layout: 'nav',
  data() {
    return {
      productDesign: [
        {
          title: '设计',
          content: '轻松上手'
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
#home_page {
  .above-content {
    .content {
      text-align: center;
      padding-top: 65px;
      h2 {
        line-height: 1.4;
        font-size: 50px;
        font-weight: 500;
        color: #1f292e;
        margin-bottom: 30px;
      }
      .desc {
        font-size: 18px;
        color: #1f292e;
        line-height: 1.8;
        margin: 40px auto 30px;
        letter-spacing: 1px;
        max-width: 600px;
      }
      .buttom-use {
        background-color: #415058;
        color: #fcfcfc;
        margin-bottom: 30px;
      }
    }
  }
  .middle {
    background: #f6f6f9;
    padding: 70px 0 30px;
    text-align: center;
    // height: 900px;
    // background: red;
    h2 {
      line-height: 1.4;
      font-size: 30px;
      font-weight: 500;
      color: #1f292e;
      margin-bottom: 30px;
    }
    
    .mid-content {
      padding: 0 20%;
      .desgin {
        margin-bottom: 3rem;
        margin-right: 30px;
        text-align: center;
        color: #1f292e;
        background: #fff;
        box-shadow: 0 2px 20px 0 rgba(0,0,0,0.06);
        border-radius: 4px;
        color: #1f292e;
        cursor: pointer;
      }
      
      .img1 {
        background-position: 0px 0px;
      }
      .img2 {
        background-position: -77px 0px;
      }
      .img3 {
        background-position: -154px 0px;
      }
      .img4 {
        background-position: -231px 0px;
      }
      .img5 {
        background-position: -308px 0px;
      }
      .img6 {
        background-position: -385px 0px;
      }
      .desgin::before {
        content: '';
        display: block;
        background-repeat: no-repeat;
        margin: 2.5rem auto 2rem;
        width: 77px;
        height: 77px;
        background-size: 462px;
        background-image: url('../static/image/homePage/sec2-sprite.png');
      }
      h3 {
        font-size: 1.5rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
      }
      .desc {
        line-height: 1.375rem;
        padding: 0 1rem 1.25rem;
        margin-top: 0;
      }
    }
    
  }
  .detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8rem 5rem 1rem;
    line-height: 1.7;
    text-align: start;
    margin: 0 auto;
    max-width: 87rem;
    .content {
      max-width: 434px;
      text-align: left;
      .sec_tips {
        font-size: 1em;
        color: #5b6b73;
      }
      .sec_title {
        margin: 0.5rem 0 1.875rem;
        font-size: 2.875rem;
        font-weight: 500;
        line-height: 1.4;
        color: #1f292e;
      }
      .sec_desc {
        color: #5b6b73;
        font-size: 18px;
        font-weight: 300;
        margin-bottom: 16px;
      }
      .secquote_list li {
        padding: 6px 0;
        font-size: 17px;
        display: flex;
        align-items: center;
        color: #1f292e;
      }
      .secquote_list li::before {
        content: '';
        display: inline-block;
        background: #ff6161;
        border-radius: 3px;
        width: 6px;
        height: 6px;
        margin-right: 12px;
      }
      // p {
      //   color: #5b6b73;
      //   font-size: 1rem;
      //   font-weight: 300;
      // }
    }
    .img-right {
      max-width: 706px;
      width: 50%;
      margin-left: 60px;
      // object-fit: contain;
    }
    .img-left {
      max-width: 706px;
      margin-right: 60px;
      // object-fit: contain;
    }
  }
  // 企业版
  .company {
    margin: 0 auto;
    max-width: 87rem;
    display: flex;
    .com-content {
      margin-bottom: 40px;
      padding-top: 60px;
      text-align: center;
      .sec_tips {
        color: #5b6b73;
        font-size: 14px;
      }
      .sec_title {
        font-size: 50px;
        font-weight: 500;
        margin-top: 15px;
        margin-bottom: 20px;
        line-height: 1.4;
        color: #1f292e;
      }
      .sec_desc {
        color: #5b6b73;
        font-size:18px;
        font-weight: 300;
        margin: 6px 0px;
      }
    }
  }
  // 开始使用
  .start-use {
    margin: 40px auto;
    .start-content {
      box-shadow: 0 5px 30px 0 rgba(43,41,41,0.15);
      padding: 40px 0;
      margin: 0 25% 0;
      line-height: 1.7;
      background-image: linear-gradient(135deg, #ff1656 0%, #ff6161 100%);
      border-radius: 20px;
      position: relative;
      z-index: 1;
      text-align: center;
      h2 {
        color: #fff;
        font-size: 40px;
      }
      .submit {
        font-size: 16px;
        color: #ff6161;
        border: none;
        border-radius: 2px;
        background-color: #fff;
        margin-top: 20px;
      }
    }
  }
}
  
</style>
<style lang="less"> 
#home_page {
  .ant-btn {
    height: 42px;
    width: 130px;
  }
}
</style>